/*
 * @Author: xiaoyan
 * @Date: 2021-11-25 09:47:21
 * @LastEditors: xiaoyan
 * @LastEditTime: 2022-02-10 14:43:28
 * @Description: 
 * @FilePath: \user_auth_front\src\pages\role\components\add.tsx
 */
import { Input, Form,Select, Row,Col, Tree } from "antd";
import { useMappedState,useDispatch} from 'redux-react-hook';
import { closeModal } from "@/store/modules/app"
import { useState } from "react";
import {treeData as tree} from "@/mocks/roles"
import SelectOrganizationLists from "@/pages/components/SelectOrganizationLists";
export default ()=>{
    const { Option } = Select;
    const dispatch = useDispatch();
    const modalConf = useMappedState(state=>state.app.modalConf);
   // const organizationLists = useMappedState(state=>state.dictionary.organizationLists);
    const [form] = Form.useForm();
    const [treeData,setTreeData] = useState([...tree]);
    const onFinish = ()=>{
        //提交事件
        console.log("提交成功");
        dispatch(closeModal());
        if(typeof modalConf.handleOk === "function") modalConf.handleOk();
    };
    const formItemLayout = {
        labelCol: { span: 6 },
        wrapperCol: { span: 18 },
    };
    const tailFormItemLayout  = {
        labelCol: { span: 3 },
        wrapperCol: { span: 21 },
    };
    const onSelect = ()=>{

    };
    const onCheck = ()=>{

    };
    /* const SelectOrganizationLists = organizationLists.map((item:any)=>
        <Option key={item.organizationId} value={item.organizationId}>{item.name}</Option>
    ); */
    return(
        <Form form={form} onFinish={onFinish} {...formItemLayout}>
            <Row gutter={24}>
                <Col span={12}>
                    <Form.Item label="角色名称：" name="name" rules={[{required: true, message: '请输入角色名称'}]}>
                        <Input allowClear />
                    </Form.Item>
                </Col>
                <Col span={12}>
                    <Form.Item label="所属机构：" name="organization" rules={[{required: true, message: '请选择所属机构'}]}>
                        <Select style={{ width: "100%" }} allowClear>
                        {SelectOrganizationLists()}
                        </Select>
                    </Form.Item>
                </Col>
            </Row>
            <Row gutter={24}>
                <Col span={12}>
                    <Form.Item label="备注：">
                        <Input allowClear />
                    </Form.Item>
                </Col>
            </Row>
            <Row gutter={24}>
                <Col span={24}>
                    <Form.Item label="功能权限：" {...tailFormItemLayout}>
                        <Tree checkable onSelect={onSelect} onCheck={onCheck} treeData={treeData} style={{height:150,overflow:"auto",border:"1px solid #DDD",padding:"10px 0"}}></Tree>
                    </Form.Item>
                </Col>
            </Row>
        </Form>
    )
};